<template>
    <section class="introduce--container content">
        <div class="top-introduce">
            <p>UME无限观影年卡</p>
            <p>开通权益全年0元畅享600+院线电影</p>
            <p>
                切换影院品牌
                <iconArrow :point="1" />
            </p>
            <p>不限情侣厅、IMAX厅、4D厅、VIP厅</p>
        </div>
        <div class="introduce-content">
            <p class="content-title">可享权益</p>
            <ul class="introduce-list">
                <li>
                    <img class="zero" src="/static/0.png" alt />
                    <p>0元观影</p>
                </li>
                <li>
                    <img class="wuxian" src="/static/wuxian.png" alt />
                    <p>全年不限次数</p>
                </li>
                <li>
                    <img class="dianyingyuan" src="/static/dianyingyuan.png" alt />
                    <p>不限特色厅</p>
                </li>
                <li>
                    <img class="dijia" src="/static/dijia.png" alt />
                    <p>同行底价购票</p>
                </li>
                <li>
                    <img class="quanguo" src="/static/quanguo.png" alt />
                    <p>全国通用</p>
                </li>
                <li>
                    <img class="zhuanshu" src="/static/zhuanshu.png" alt />
                    <p>不限特色厅</p>
                </li>
            </ul>
            <p class="content-title">选择开通类型</p>
            <ul class="type-list">
                <li class="active">
                    <p class="top-tag">限时折扣</p>
                    <p class="type-name">单人年卡</p>
                    <p class="now-price">
                        <span>¥</span>58.00
                        <span>/年</span>
                    </p>
                    <p class="old-price">¥998/年</p>
                </li>
                <li>
                    <p class="top-tag">限时折扣</p>
                    <p class="type-name">单人年卡</p>
                    <p class="now-price">
                        <span>¥</span>58.00
                        <span>/年</span>
                    </p>
                    <p class="old-price">¥998/年</p>
                </li>
                <li>
                    <p class="top-tag">限时折扣</p>
                    <p class="type-name">单人年卡</p>
                    <p class="now-price">
                        <span>¥</span>58.00
                        <span>/年</span>
                    </p>
                    <p class="old-price">¥998/年</p>
                </li>
            </ul>
            <div class="kaitong">
                <p>
                    兑换码兑换
                    <span>
                        实体卡&nbsp;&nbsp;
                        <iconArrow class="iconArrow" :point="1" />
                    </span>
                </p>
            </div>
        </div>
        <div class="btn--container">
            <label>
                <checkbox color="#e2065d" value="cb" />阅读并同意
                <span>《权益开通协议》</span>
                <span>《权益规则详情》</span>
            </label>
            <button type="primary">立即开通</button>
        </div>
    </section>
</template>

<script>
// import footerMenu from "../components/footer";
import iconArrow from "../components/icon-arrow";
export default {
    components: {
        iconArrow
    },
    data() {
        return {};
    },
    onLoad() {},
    methods: {}
};
</script>
<style lang="scss">
.introduce--container {
    overflow-y: scroll;
    width: 100vw;
    overflow: hidden;
    min-height: 100vh;
    background-color: #f4f4f4;
    .top-introduce {
        width: 90%;
        // height: px2vw(100);
        margin: 10px auto auto auto;
        background-color: #e2d5b0;
        overflow: hidden;
        border-top-left-radius: px2vw(15);
        border-top-right-radius: px2vw(15);
        position: relative;
        p {
            float: left;
            &:nth-child(1) {
                width: 60%;
                color: #968a66;
                font-size: px2vw($fz20);
                font-weight: bold;
                margin: px2vw(30) auto auto px2vw(20);
            }
            &:nth-child(2) {
                width: 60%;
                color: #968a66;
                font-size: px2vw($fz12);
                margin: px2vw(5) auto px2vw(30) px2vw(20);
            }
            &:nth-child(3) {
                color: #968a66;
                font-size: px2vw($fz14);
                margin: px2vw(20) auto auto auto;
                position: absolute;
                top: px2vw(45);
                right: 10px;
            }
            &:nth-child(4) {
                width: 100%;
                height: px2vw(25);
                line-height: px2vw(25);
                text-align: center;
                font-size: px2vw($fz12);
                color: #fff;
                background-color: #d6c38b;
            }
        }
    }
    .introduce-content {
        width: 100%;
        background-color: #fff;
        .content-title {
            text-align: center;
            display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
            font-size: px2vw($fz14);
            color: #9b8f6d;
            position: relative; /*定位横线（当横线的父元素）*/
            padding-top: px2vw(30);
            &:before,
            &::after {
                content: ""; /*CSS伪类用法*/
                position: absolute; /*定位背景横线的位置*/
                top: px2vw(40);
                background: #ddd; /*宽和高做出来的背景横线*/
                width: 9%;
                height: 1px;
            }
            &::before {
                left: 25%; /*调整背景横线的左右距离*/
            }
            &::after {
                right: 25%;
            }
        }
        .introduce-list {
            width: 80%;
            margin: 0 auto;
            &:after {
                display: block;
                content: "clear";
                clear: both;
                height: 0;
                width: 100%;
                overflow: hidden;
            }
            li {
                width: 30%;
                float: left;
                margin-top: px2vw(30);
                position: relative;
                list-style: none;
                &:not(:nth-child(3n)) {
                    margin-right: 5%;
                }
                img {
                    position: absolute;
                    margin: auto;
                    left: 0;
                    right: 0;
                    &.zero {
                        width: px2vw(42);
                        height: px2vw(28);
                    }
                    &.wuxian {
                        width: px2vw(44);
                        height: px2vw(22);
                    }
                    &.dianyingyuan {
                        width: px2vw(38.5);
                        height: px2vw(34.5);
                    }
                    &.dijia {
                        width: px2vw(49.5);
                        height: px2vw(43);
                    }
                    &.quanguo {
                        width: px2vw(40);
                        height: px2vw(40);
                    }
                    &.zhuanshu {
                        width: px2vw(37.5);
                        height: px2vw(31);
                    }
                }
                p {
                    font-size: px2vw($fz14);
                    color: $c-light;
                    text-align: center;
                    margin-top: px2vw(50);
                }
            }
        }
        .type-list {
            width: 90%;
            margin: 0 auto;
            &:after {
                display: block;
                content: "clear";
                clear: both;
                height: 0;
                width: 100%;
                overflow: hidden;
            }
            li {
                width: 30%;
                float: left;
                margin-top: px2vw(30);
                // background-color: red;
                box-sizing: border-box;
                border: 1px solid #ddd6c1;
                border-radius: 5px;
                position: relative;
                list-style: none;
                background-color: #f6f6f6;
                &:not(:nth-child(3n)) {
                    margin-right: 5%;
                }
                &.active {
                    background-color: #f7e4ab;
                    .top-tag {
                        background-color: #5e5040;
                    }
                    .type-name {
                        background-color: #e1c265;
                    }
                }
                .top-tag {
                    // width: px2vw(57);
                    // height: px2vw(18);
                    position: absolute;
                    margin: auto;
                    left: 0;
                    top: 0;
                    background-color: #c8c8c8;
                    border-bottom-right-radius: px2vw(10);
                    font-size: px2vw($fz10);
                    color: #fff;
                    text-align: center;
                    padding: 0 px2vw(10);
                }
                .type-name {
                    background-color: #fcfcfc;
                    font-size: px2vw($fz14);
                    text-align: center;
                    color: #7c6e45;
                    margin-top: px2vw(28);
                }
                .now-price {
                    margin-top: px2vw(15);
                    color: #a38838;
                    text-align: center;
                    span {
                        font-size: px2vw($fz12);
                    }
                }
                .old-price {
                    margin-bottom: px2vw(10);
                    font-size: px2vw($fz12);
                    color: $c-light;
                    text-align: center;
                    text-decoration: line-through;
                }
            }
        }
        .kaitong {
            width: 95%;
            height: px2vw(60);
            margin: px2vw(30) auto auto auto;
            background-color: #fff;
            border-top: 1px solid #ddd;
            p {
                font-size: px2vw($fz14);
                line-height: px2vw(60);
                color: #333;
                span {
                    padding-right: px2vw(5);
                    float: right;
                    text-align: right;
                    color: $c-light;
                    font-size: px2vw($fz14);
                    .iconArrow {
                        margin-left: px2vw(5);
                    }
                }
            }
        }
    }
    .btn--container {
        width: 100%;
        height: px2vw(120);
        background-color: #fff;
        margin-top: px2vw(10);
        padding-bottom: px2vw(10);
        border-top-left-radius: px2vw(15);
        border-top-right-radius: px2vw(15);
        overflow: hidden;
        > label {
            width: 100%;
            display: block;
            text-align: center;
            font-size: px2vw($fz14);
            color: #808080;
            margin-top: px2vw(30);
            span {
                color: #e0514c;
            }
        }
        button {
            width: px2vw(345);
            height: px2vw(50);
            line-height: px2vw(50);
            background-color: #e1c77b;
            border-color: #e1c77b;
            margin: px2vw(10) auto auto auto;
        }
    }
}
</style>